<template>
    <div class="genjiedian">
        <div class="danpwraps clearfix">
            <div class="danps-l fl clearfix">
                <div class="clearfix">
                    <div class="tupianwraps fl">
                        <div class="tupian">
                            <a href="" class="waiwrap">
                                <span class="zoomicon"></span>
                                <span class="imgzoom-wrap" @mousemove="yidong" @mouseover="mb" @mouseout="mn">
                                    <img :src="'/img'+imgwrap[0]" class="imgzoom">
                                    <div class="saomiaowrap"></div>
                                </span>
                                <div class="cjxs">
                                   <div class="cjdatu"><img :src="'/img'+imgwrap[0]" alt="" class="cjimg"></div>
                                </div>
                            </a>
                        <!-- <div class="img-yc">
                            <img src="../assets/img/shangpin/danpinsimg.jpg" alt="" class="imgzoom2">
                        </div> -->
                        </div>
                        <div class="lwimgwrap">
                            <ul class="tbimgs">
                                <li class="zhaodaoni" @mouseover="huanbor(skey,sitem)" v-for="(sitem,skey) in imgwrap" :key="skey">
                                    <a href="javascript:;">
                                        <img :src="'/img'+sitem">
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <p class="fenxwraps clearfix">
                            <span class="fr jubao"><a href="">举报</a></span>
                            <a href="" class="fenxiangs"><i></i><span>分享</span></a>
                            <a href="javascript:;" class="scshangpins" @click="shoucang"><i></i><span v-if="scpl">收藏商品</span><span v-else class="red">已收藏</span></a>
                            <span class="renqiswrap">(<span>{{renqi}}</span>人气)</span>
                        </p>
                    </div>
                    <div class="danps-r fr">
                        <div class="detaihd">
                            <div class="biaoqianlists">
                                <span v-for="(mitem,mkey) in mswrap" :key="mkey">{{mitem}}</span>
                            </div>
                        </div>
                        <div class="fcs-panel">
                            <div class="panel1 clearfix">
                                <img src="../assets/img/ys/32.png" class="gouwuimg" alt="">
                                全天猫商品通用
                                <a href="" class="goquan">去刮券</a>
                            </div>
                            <div class="panel2">
                                <span class="p2p">价格</span>
                                <span>
                                    <em class="ems">￥</em>
                                    <span class="p2price">{{moneywrap[0]}}</span>
                                </span>
                            </div>
                        </div>
                        <ul class="xinashilist">
                            <li class="xsitems">
                                <div class="xsdiv">
                                    <span class="labels">累计销量</span>
                                    <span class="couts xiaoliangcout">{{xiaoliang}}</span>
                                </div>
                            </li>
                            <li class="xsitems">
                                <div class="xsdiv">
                                    <span class="labels">累计评价</span>
                                    <span class="couts pinjiacout">{{coms}}</span>
                                </div>
                            </li>
                            <li class="xsitems">
                                <div class="xsdiv">
                                    <a href="">
                                        <span class="labels">送天猫积分</span>
                                        <span class="lvjifen couts">199</span>
                                    </a>
                                </div>
                            </li>
                        </ul>
                        <div class="tb-key">
                            <div class="tb-wrap">
                                <div class="tb-sku">
                                    <div :class="{hi:kxxianshi}">
                                    <dl class="cijifl-wrap clearfix">
                                        <dt class="cijibiaoqian cjbq1">尺码</dt>
                                        <dd class="dds clearfix">
                                            <ul class="clearfix">
                                                <li class="dds-li" v-for="(items,keys) in kxwrap" :key="keys" >
                                                    <a href="javascript:;" class="ddsa" @click="huochima(items,keys)"><span>{{items}}</span></a>
                                                </li>
                                            </ul>
                                        </dd>
                                    </dl>
                                    </div>
                                    <dl class="cijifl-wrap clearfix">
                                        <dt class="cijibiaoqian cjbq2">颜色分类</dt>
                                        <dd class="dds clearfix">
                                            <ul class="clearfix">
                                                <li class="dds-li" v-for="(item,key) in imgwrap" :key="key">
                                                    <a href="javascript:;" class="dd2a" @click="huoyanse(item,key)" :title="bxwrap[key]"><img :src="'/img'+item" class="dd2aimg" alt=""></a>
                                                </li>
                                            </ul>
                                        </dd>
                                    </dl>
                                    <dl class="shuliangs-wrap clearfix">
                                        <dt class="cijibiaoqian shuliangs">数量</dt>
                                        <dd class="zs-wrap">
                                            <span>
                                                <input type="text" v-model="num" title="请输入购买量" maxlength="8" class="mainum">
                                                <span class="amo-wrap">
                                                    <span class="amoup" @click="aup"></span><span class="amodown" @click="dup"></span>
                                                </span>
                                                <span class="danwei">件</span>
                                            </span>
                                            <em class="kucuns">库存<span>{{arr.stock}}</span>件</em>
                                        </dd>
                                    </dl>
                                    <div class="gm-wrap clearfix">
                                        <div class="ligouwrap fl">
                                            <a href="javascript:;" class="ligou" @click="lg">立即购买</a>
                                        </div>
                                        <div class="jiagouwrap fl">
                                            <a href="javascript:;" class="jiagou" @click="jiagou">加入购物车</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clearwrap">
                            <dl class="tm-clear clearfix">
                                <dt class="cijibiaoqian">服务承诺</dt>
                                <dd class="dds3">
                                    <ul>
                                        <li><a href="">正品保证</a></li>
                                        <li><a href="">极速退款</a></li>
                                        <li><a href="">七天无理由退换</a></li>
                                    </ul>
                                </dd>
                            </dl>
                            <div class="paybox-wrap">
                                <div class="paybox">
                                    <em class="paytitle">支付方式</em><em class="paysuoyou">∨</em>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>    
                <div class="pinlun-wrap clearfix">
                    <div class="fl pdianpuwrap">
                        <h3 class="plhds">
                            <div>
                                <a href="" class="pldianname">{{dpname}}</a>
                                <span>
                                    <a href="" class="dongtus"></a>
                                </span>
                            </div>
                        </h3>
                        <div class="jiniandianwrap">
                            <span class="jinianicon">7</span>
                            <div class="jiniandian">天猫7年店</div>
                        </div>
                        <div class="main-info">
                            <div class="shopitem">
                                <div class="shoptitle">描述</div>
                                <div class="shopscore">
                                    <span class="sps-con">4.8</span>
                                    <s class="scoreup">↑</s>
                                </div>
                            </div>
                            <div class="shopitem">
                                <div class="shoptitle">服务</div>
                                <div class="shopscore">
                                    <span class="sps-con">4.8</span>
                                    <s class="scoreup">↑</s>
                                </div>
                            </div>
                            <div class="shopitem">
                                <div class="shoptitle">物流</div>
                                <div class="shopscore">
                                    <span class="sps-con">4.8</span>
                                    <s class="scoreup">↑</s>
                                </div>
                            </div>
                        </div>
                        <div class="btnscwrap">
                            <a href="" class="jindiangg">进店逛逛</a><a href="" class="scdd">收藏店铺</a>
                        </div>
                    </div>
                    <div class="fr plwraps1">
                        <div class="pl1hd">
                            <ul class="pl1ul">
                                <li class="ac1">
                                    <a href="" class="spinxiangqins">商品详情</a>
                                </li>
                                <li class="ljias">
                                    <a href="">
                                        累计评价
                                        <em class="pjshus1">{{coms}}</em>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="newdpinfo">
                            <ul>
                                <li></li>
                            </ul>
                        </div>
                        <div class="zhenplwrap">
                            <div class="clearfix" v-for="(item,key) in parr" :key="key">
                                <div class="fl ntu">{{item.comment}}</div>
                                <div class="fl spleixins">尺码：{{item.cm}}&nbsp;颜色：{{item.ys}}</div>
                                <div class="fl pjz">{{item.UID}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="kkwrap fr">
                <div class="inner">
                    <div class="innerhd">
                        <s></s>
                        <span>看了又看</span>
                    </div>
                    <div class="innerlist-wrap">
                        <div class="innerlist">
                            <ul class="innerul">
                                <li class="innerli" v-for="(item,key) in carr" :key="key">
                                    <div class="innerimg-wrap">
                                        <a href="" class="inneras">
                                            <img :src="'/img/'+cimgwrap[key][0]" alt="" class="innerimg">
                                        </a>
                                        <p class="lookprice">￥<span class="lprice">{{item.money}}</span></p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <ul class="innersx clearfix">
                            <li class="innersh fl">上一个</li>
                            <li class="innerxia fr">下一个</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="pl-w" :class="{hi:pinlun}">
            <form class="f">
                <textarea class="plwb-w" v-model="z"></textarea>
                <button class="plqd" type="button" @click="plqd">评论</button>
            </form>
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        jiagou(){
            if(!this.yanse && !this.yimg && !this.chima){
                this.$toast({
                    message:"请完成商品尺码或颜色的选择",
                    duration:2000
                })
                return false
            }
            let spid=this.arr.spid
            let miaoshu=this.arr.miaoshutag
            let sid=this.arr.SID
            var gouwuche={
                sid:sid,
                spid:spid,
                yimg:this.yimg,
                yanse:this.yanse,
                miaoshu:miaoshu,
                chima:this.chima,
                danjia:this.arr.money,
                shuliang:this.num
            }
            axios.post("/api/jiagouwuche",{gouwuche}).then((data)=>{
                if(data.data){
                   if(data.data=="ok"){
                        this.$toast({
                            message:"添加成功",
                            duration:2000
                        })
                   }else{
                        this.$toast({
                            message:"购物车已存在该商品",
                            duration:2000
                        })
                   }
                    this.yanse=""
                    this.yimg=""
                    this.chima=""
                     var awrap=document.getElementsByClassName("ddsa")
                    for(var i=0;i<awrap.length;i++){
                        awrap[i].classList.remove('active')
                    }
                    var awraps=document.getElementsByClassName('dd2a')
                    for(var i=0;i<awraps.length;i++){
                        awraps[i].classList.remove('active')
                    }
                }else{
                    this.$toast({
                        message:"请完成商品尺码或颜色的选择",
                        duration:2000
                    })
                    return false
                }
            })
        },
        dup(){
            if(this.num==1){
                this.num=1
            }else{
                this.num--
            }
        },
        aup(){
            if(this.num==this.arr.stock){
                this.num=this.arr.stock
            }else{
                this.num++
            }
        },
        huoyanse(val,key){
            var awrap=document.getElementsByClassName('dd2a')
            let limg=document.getElementsByClassName('zhaodaoni')
            let datu=document.getElementsByClassName('imgzoom')[0]
            let cjimg=document.getElementsByClassName('cjimg')[0]
            if(awrap[key].className.indexOf('active')>-1){

            }else{
                for(var i=0;i<awrap.length;i++){
                    awrap[i].classList.remove('active')
                }
                for(var i=0;i<limg.length;i++){
                    limg[i].classList.remove('selectedimg')
                }
                datu.src=`/img${val}`
                 cjimg.scr=`/img${val}`
                awrap[key].classList.add('active')
                this.yimg=val
                console.log(this.bxwrap[key])
                this.yanse=this.bxwrap[key]
            }
        },
        huochima(val,key){
            this.chima=val
            var awrap=document.getElementsByClassName("ddsa")
            if(awrap[key].className.indexOf('active')>-1){

            }else{
                for(var i=0;i<awrap.length;i++){
                    awrap[i].classList.remove('active')
                }
                awrap[key].classList.add("active")
            }
            
        },
         lg(){
          if(this.chima &&this.yanse){
              var a=document.getElementsByClassName('pl-w')
               axios.post('/api/pinglun',{SID:this.sid,GS:this.num}).then((data)=>{
                      if(data.data){
                        this.pinlun=false;
                      }
                  })
            
          }else{
               this.$toast({
                        message:"请完成商品尺码或颜色的选择",
                        duration:2000
                    })
                    return false
          }
        },
        plqd(){
              
              var a=document.getElementsByClassName('pl-w')[0]
             
              if(this.z==null){
                  this.$toast({
                        message:"请完输入你的评论",
                        duration:2000
                    })
                    return false
              }else{
                  axios.post('/api/pinglun2',{SID:this.sid,PL:this.z,CM:this.chima,YS:this.yanse}).then((data)=>{
                      if(data.data){
                           this.pinlun=true;
                           this.xiaoliang=Number(this.xiaoliang)+this.num
                           this.coms=this.coms++
                          var na={
                              Id:this.parr.length+1,
                              SID:this.sid,
                              UID:this.uname,
                              comment:this.z,
                              ys:this.yanse,
                              cm:this.chima
                          }
                          this.z=""
                          this.chima=""
                          this.yanse=""
                          this.num=1
                        this.parr.splice(0,0,na)
                         console.log(this.parr)
                         
                      }
                  })
              }
        },
        shoucang(){
            var _this=this
            if(_this.scpl){
                 axios.post("/api/scspin",{sid:_this.sid}).then((data)=>{
                     if(data.data){
                         _this.scpl=false
                         _this.renqi=_this.renqi+1
                     }else{
                         _this.scpl=true
                     }
                })
            }else{
                axios.post("/api/shanchuscsp",{sid:_this.sid}).then((data)=>{
                    if(data.data){
                        _this.renqi=_this.renqi-1
                        _this.scpl=true
                    }else{
                        _this.scpl=false
                    }
                })
            }
           
        },
        mb(){
            let xwrap=document.getElementsByClassName('saomiaowrap')[0]
            let zicon=document.getElementsByClassName('zoomicon')[0]
            let cjxs=document.getElementsByClassName('cjxs')[0]
            xwrap.style.display="block"
            zicon.style.display="none"
            cjxs.style.display="block"
        },
        mn(){
            let zicon=document.getElementsByClassName('zoomicon')[0]
              let xwrap=document.getElementsByClassName('saomiaowrap')[0]
               let cjxs=document.getElementsByClassName('cjxs')[0]
            xwrap.style.display="none"
            zicon.style.display="block"
             cjxs.style.display="none"
        },
        yidong(e){
            let xwrap=document.getElementsByClassName('saomiaowrap')[0]
            let tupian=document.getElementsByClassName('imgzoom-wrap')[0]
            let ss=document.getElementsByClassName('tupianwraps')[0]
            let wai=document.getElementsByClassName('waiwrap')[0]
            let cjdatu=document.getElementsByClassName('cjdatu')[0]
            let cjxs=document.getElementsByClassName('cjxs')[0]
            var left=e.clientX - tupian.offsetLeft - wai.getBoundingClientRect().left - xwrap.offsetWidth/2
            var top=e.clientY - tupian.offsetTop - wai.getBoundingClientRect().top - xwrap.offsetHeight/2
             console.log(e) 
            if(left<0){
                left=0
            }else if(left > (wai.offsetWidth-xwrap.offsetWidth)){
                left =wai.offsetWidth-xwrap.offsetWidth
            }
            if(top<0){
                top=0;
            }else if(top >( wai.offsetHeight - xwrap.offsetHeight)){
                top= wai.offsetHeight - xwrap.offsetHeight
            }
            
            xwrap.style.left=left+"px"
            xwrap.style.top=top+"px"
            console.log(wai.getBoundingClientRect().top)
           var pleft=left/(wai.offsetWidth-xwrap.offsetWidth)
           var ptop=top/(wai.offsetHeight - xwrap.offsetHeight)
            cjdatu.style.left=-pleft*(cjdatu.offsetWidth-cjxs.offsetWidth)+"px"
            cjdatu.style.top=-ptop*(cjdatu.offsetHeight-cjxs.offsetHeight)+"px"
            //  let bw=e.pageX-iw.getBoundingClientRect().left-xwrap.scrollWidth/2
            //     let bh=e.pageY-iw.getBoundingClientRect().top-xwrap.scrollHeight/2
            
            // let pleft=iw.scrollWidth-xwrap.scrollWidth
            // let phig=iw.scrollHeight-xwrap.scrollHeight
            
          
          
        },
        huanbor(val,sitem){
            let limg=document.getElementsByClassName('zhaodaoni')
            let datu=document.getElementsByClassName('imgzoom')[0]
            let cjimg=document.getElementsByClassName('cjimg')[0]
            if(limg[val].className.indexOf('selectedimg')>-1){

            }else{
                for(var i=0;i<limg.length;i++){
                    limg[i].classList.remove('selectedimg')
                }
                limg[val].classList.add("selectedimg")
                datu.src=`/img${sitem}`
                cjimg.scr=`/img${sitem}`
            }
        }
    },
    props:["mdp"],
    watch:{
        mdp(newV,oldV){
           sessionStorage.setItem('danpinnav',newV)
           this.$router.push({name:"shangpu",params:{id:this.id}})
        }
    },
    data(){
        return{
            z:'',
            pinlun:true,
            yimg:"",
            arr:"",
            num:1,
            yanse:"",
            chima:"",
            id:"",
            sid:"",
            renqi:"",
            kcwrap:[],
            imgwrap:[],
            kxwrap:[],
            bxwrap:[],
            mswrap:[],
            dpname:"",
            moneywrap:[],
            coms:"",
            xiaoliang:"",
            kxxianshi:false,
            scpl:true,
            carr:"",
            cimg:"",
            cimgwrap:[],
            parr:'',
            uname:""
        }
    },
    created(){
        console.log(this.$route.params)
        this.id=this.$route.params.id
        this.sid=this.$route.params.sid
         axios.get("/api/").then((data)=>{
            if(data.data){
                this.uname=data.data
            }else{
                this.$router.push("/login")
            }
        })
        axios.post("/api/danpins",{id:this.id,sid:this.sid}).then((data)=>{
            console.log(data.data[0].stock)
            if(data.data){
                this.arr=data.data[0]
                if(data.data[0].shoucangzhe){
                   let zongrenqi=data.data[0].shoucangzhe.split(',')
                    this.renqi=zongrenqi.length
                }else{
                    this.renqi=0
                }
                this.imgwrap=data.data[0].img.split(',')
                this.kcwrap=data.data[0].stock
                this.dpname=data.data[0].spname
                this.bxwrap=data.data[0].bixuan.split(',')
                console.log(this.arr.spid)
               if(data.data[0].kexuan){
                    this.kxwrap=data.data[0].kexuan.split(',')
               }else{
                   this.kxxianshi=true
               }
                this.mswrap=data.data[0].miaoshutag.split(',')
                this.moneywrap=data.data[0].money.split(',')
                if(data.data[0].comments==""){
                    this.coms=0
                }else{
                     this.coms=data.data[0].comments.split(',').length
                }
               
                this.xiaoliang=data.data[0].sell

            }else{
                this.$toast({
                        message:"数据异常一秒后重新刷新页面，或者手动刷新",
                        duration:2000
                    })
                    window.location.href="/"
            }
        })
        axios.post("/api/chadps",{sid:this.sid}).then((data)=>{
            if(data.data){
                this.scpl=false
                
            }else{
                this.scpl=true
            }
        })
        axios.post("/api/cebian",{id:this.id}).then((data)=>{
            if(data.data){
                var _this=this
                this.carr=data.data
                for(var i=0;i<data.data.length;i++){
                    _this.cimg=data.data[i].img.split(',')
                    _this.cimgwrap.push(_this.cimg)
                    _this.cimg=""
                }
            }
        })
        axios.post('/api/p',{sid:this.sid}).then((data)=>{
            if(data.data){
                this.parr=data.data

            }else{
                this.parr=[]
            }
        })
    }
    
}
</script>


<style scoped>
.pl-w{
    border:1px solid #999;
    z-index: 9999;
    width: 800px;
    height: 400px;
    position: absolute;
    top:400px;
    left:500px;
    background: #ffffff;
}
.plwb-w{
    font-size: 20px;
    padding: 10px;
    border: none;
    background: #fff;
    width:780px;
    height: 330px;
}
.f{
    position: relative;
}
.plqd{
    cursor: pointer;
    width: 200px;
    height: 40px;
    border: none;
    background: #f40;
    color: #fff;
    font-size: 20px;
    text-align: center;
    position: absolute;
    bottom: -40px;
    left: 325px;
}
*{
    padding: 0;
    margin: 0;
}
.red{
    color: #FF0036;
}
.cjxs{
    position: absolute;
    display: none;
    top: 0;
    right: -428px;
    width: 418px;
    height: 418px;
    overflow: hidden;
}
.cjdatu{
    position: absolute;
    top: 0px;
    left:0;
    background: #ccc;
    width: 936px;
    height: 936px;
}
.cjimg{
    width: 100%;
    height: 100%;
}
.hi{
    display: none;
}
.dd2aimg{
    width: 100%;
    height: 100%;
}
.jubao a{
    font-size: 12px;
}
.renqiswrap{
    font-size: 12px;
}
.imgzoom-wrap{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.imgzoom-wrap:hover .miaoshuwrap{
    display: block;
}
.img-yc{
    top: 0;
    position: absolute;
    /* display: none; */
    z-index: 999;
    width: 400px;
    height: 400px;
    overflow: hidden;
}
.img-yc>img{
    position: absolute;
    width: 800px;
    height:800px;
}
    *{
        box-sizing: content-box;
    }
    .danpwraps{
        width: 1191px;
        margin: 20px auto;
    }
    .danps-l{
        width: 990px;
        position: relative;
        z-index: 100;
        min-height: 600px;
    }
    .tupianwraps{
        width: 460px;
        position: relative;
    }
    .tupian{
        position: relative;
        display: table;
        table-layout: fixed;
        z-index: 1;
        width: 420px;
        height: 420px;
        margin: 20px auto 0;
    }
    .tupian a{
        width: 418px;
        height: 418px;
        border: 1px solid rgba(0,0,0,.05);
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        position: relative;
    }
    .zoomicon{
        font-family: tm-detail-font;
        font-style: normal;
        font-weight: 400;
        height: 30px;
        line-height: 30px;
        width: 30px;
        z-index: 2;
        position: absolute;
        opacity: .6;
        color: #333;
        font-size: 18px;
        right: 0;
        bottom: 0;
        background: url("../assets/img/ys/zoomicon.png") no-repeat;
        background-size: 100% 100%;
    }
    .imgzoom{
        vertical-align: middle;
        width: 100%;
        height: 100%;
    }
    .saomiaowrap{
        position:absolute;
        display: none;
        top: 0;
        left: 0;
        width: 209px;
        height: 209px;
        cursor: move;
        background: url("../assets/img/ys/11.png");
        overflow: hidden;
        background-position: 0 0;
        background-attachment: scroll;
        background-repeat: repeat;
    }
    .lwimgwrap{
        position: relative;
    }
    .tbimgs{
        text-align: center;
        margin-left: -16px;
        white-space: nowrap;
        position: relative;
        transition: left .2s cubic-bezier(0,0,.25,1);
        font-size: 0;
        overflow: hidden;
        margin: 0 auto;
    }
    .tbimgs li{
        display: inline-block;
        margin: 0 0 0 16px;
        padding-top: 22px;
        float: left;
    }
    .tbimgs li a{
        float: left;
        position: relative;
        width: 60px;
        height: 60px;
        overflow: hidden;
    }
    .tbimgs li a img{
        position: relative;
        max-width: 60px;
        max-height: 60px;
    }
    .selectedimg img{
        box-sizing: border-box;
        border: 2px solid #000000;
    }
    .fenxwraps{
        padding: 38px 40px 25px;
        color: #999;
        width: 75%;
    }
    .fenxwraps a{
        color: #999;
    }
    .jubao:hover a{
        text-decoration: underline;
        color: #999;
    }
    .fenxiangs{
        text-decoration: none;
        float: left;
        margin-right: 2em;
    }
    .fenxiangs i{
        display: inline-block;
        float: left;
        line-height: 16px;
        margin-right: 4px;
        width: 16px;
        height: 16px;
        background: url("../assets/img/ys/101.png");
        font-family: tm-detail-font;
        font-style: normal;
        color: #baaa99;
        text-decoration: none;
        margin-top: 4px;
    }
    .fenxiangs span{
        display: inline-block;
        line-height: 16px;
        font-size: 12px;
    }
    .scshangpins i{
        display: inline-block;
        float: left;
        line-height: 16px;
        margin-right: 4px;
        width: 16px;
        height: 16px;
        background: url("../assets/img/ys/13.png");
        font-family: tm-detail-font;
        font-style: normal;
        color: #baaa99;
        text-decoration: none;
        margin-top: 4px;
    }
    .scshangpins span{
        font-size: 12px;
    }
    .scshangpins:hover{
        text-decoration: underline;
        color: #FF0036;
    }
    .danps-r{
        padding: 0 0 10px;
        width: 530px;
    }
    .detaihd{
        padding: 20px 10px 12px;
        color: #000000;
    }
    .shangpinname{
        padding-bottom: .2em;
        line-height: 1;
        font-size: 16px;
        font-weight: 700;
        color: #000;
    }
    .biaoqianlists span{
        display: inline-block;
        font-size: 14px;
        /* color: #FF0036; */
        margin-right: 15px;
        font-size: 16px;
    }
    .fcs-panel{
        background-color: #e9e9e9;
        background-repeat: no-repeat;
        position: relative;
        left: 0;
        font: 12px/1.5 "Microsoft Yahei",tahoma,arial;
        padding-bottom: 5px;
        padding-top: 5px;
        margin-right: 20px;
    }
    .panel1{
        position: relative;
        height: 35px;
        margin: 0 10px 0 8px;
        line-height: 35px;
        color: #8D8D8D
    }
    .panel2{
        line-height: 30px;
        position: static;
        color: #333;
        padding-left: 0;
    }
    .gouwuimg{
        height: 16px;
        float: left;
        display: inline-block;
        margin: 10px 5px 0 0;
    }
    .goquan{
        position: absolute;
        right: 0;
        top: 0;
        display: inline-block;
        color: #FF0036;
        padding-right: 22px;
        background-repeat: no-repeat;
        cursor: pointer;
        background-position: right center;
        background-image: url("../assets/img/ys/goquan.png");
        background-size: 16px 16px;
    }
    .goquan:hover{
        text-decoration: underline;
    }
    .p2p{
        color: #999;
        font-size: 12px;
        text-align: left;
        float: left;
        width: 69px;
        margin: 0 0 0 8px;
        display: inline-block;
    }
    .ems{
        color: #FF0036;
        font-size: 18px;
        font-family: Arial;
        text-decoration: none;
        vertical-align: middle;
        font-style: normal;
    }
    .p2price{
        color: #FF0036;
        font-size: 24px;
        font-weight: bolder;
        vertical-align: middle;
        font-family: Arial;
        text-decoration: none;
    }
    .xinashilist{
        font-size: 14px;
        border: 1px dotted #c9c9c9;
        border-width: 1px 0;
        margin: -1px 20px 0 0;
        padding: 10px 0;
        position: relative;
        overflow: hidden;
        clear: both;
        display: flex;
    }
    .xsitems{
        float: left;
        width: 33%;
        text-align: center;
        position: relative;
        left: -1px;
        border-left: 1px solid #e5dfda;
        flex: 1;
        line-height: 16px;
    }
    .labels{
        display: inline-block;
        line-height: 16px;
        height: 16px;
        color: #999;
    }
    .couts{
        display: inline-block;
        line-height: 16px;
        height: 16px;
        color: #FF0036;
        font-weight: 700;
        margin-left: 3px;
    }
    .lvjifen{
        color: #280;
    }
    .tb-key{
        margin: 0 20px 24px 10px;
    }
    .tb-wrap{
        padding: 10px 0;
    }
    .tb-sku{
        padding: 5px 0 12px;
        position: relative;
    }
    .cijifl-wrap{
        padding-bottom: 6px;
    }
    .cijibiaoqian{
        text-align: left;
        float: left;
        width: 66px;
        color: #838383;
        margin-top: 8px;
        font-size: 12px;
    }
    .dds{
        width: 420px;
        float: left;
    }
    .dds-li{
        line-height: 28px;
        float: left;
        position: relative;
        margin: 0 4px 4px 0;
        vertical-align: middle;
        padding: 1px;
    }
    .ddsa{
        float: left;
        background-color: #fff;
        white-space: nowrap;
        width: auto!important;
        min-width: 10px;
        padding: 0 9px;
        text-align: center;
        border: 1px solid #b8b7bd;
        color: #000;
        text-decoration: none;
    }
    .ddsa.active{
         margin: -1px;
        border: 2px solid #FF0036;
    }
     .dds li a:hover{
        margin: -1px;
        border: 2px solid #FF0036;
    }
    .dds li a span{
        padding-left: 1px;
        font-size: 12px;
    }
    .dd2a{
        width: 38px!important;
        height: 38px;
        padding: 0;
        /* line-height: 38px; */
        background: url("../assets/img/shangpin/bai1.jpg") center no-repeat;
        text-align: center;
        border: 1px solid #b8b7bd;
        color: #000;
        text-decoration: none;
        float: left;
        white-space: nowrap;
    }
    .dd2a.active{
        margin: -1px;
        border: 2px solid #ff0036;
    }
    .zs-wrap{
        height: 35px;
        line-height: 31px;
        color: #878787;
        width: 100%;
    }
    .mainum{
        padding: 3px 2px 0 3px;
        line-height: 26px;
        vertical-align: middle;
        height: 26px;
        border: 1px solid #a7a6ac;
        width: 36px;
        font-size: 12px;
        color: #666;
    }
    .amo-wrap{
        display: inline-block;
        vertical-align: middle;
        line-height: 31px;
        color: #878787;
    }
    .amoup{
        width: 20px;
        height: 16px;
        overflow: hidden;
        display: block;
        cursor: pointer;
        margin-bottom: 3px;
        background: url("../assets/img/ys/amoup.png")
    }
    .amodown{
        width: 20px;
        height: 16px;
        overflow: hidden;
        display: block;
        cursor: pointer;
        background: url("../assets/img/ys/amoup.png");
        transform: rotate(180deg)
    }
    .danwei{
        vertical-align: middle;
        margin-left: 5px;
        line-height: 31px;
        font-size: 12px;
        color: #878787;
    }
    .kucuns{
        display: inline;
        color: #878787;
        margin-left: 1.2em;
        font-size: 12px;
    }
    .gm-wrap{
        padding: 10px 0 0 66px;
        margin: 10px 0 0;
    }
    .ligouwrap{
        margin-right: 10px;
    }
    .ligou{
        margin-right: 0;
        float: left;
        overflow: hidden;
        position: relative;
        width: 178px;
        background-color: #ffeded;
        border: 1px solid #FF0036;
        color: #FF0036;
        font-family: 'Microsoft Yahei';
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-size: 16px;
    }
    .jiagouwrap{
        margin-right: 1px;
    }
    .jiagou{
        background-color: #ff0036;
        border: 1px solid #ff0036;
        color: #fff;
        margin-right: 0;
        float: left;
        overflow: hidden;
        position: relative;
        width: 178px;
        font-family: 'Microsoft Yahei';
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-size: 16px;
    }
    .clearwrap{
        margin: 0 20px;
        padding-bottom: 20px;
        position: relative;
    }
    .tm-clear{
        margin-right: 67px;
    }
    .dds3{
        margin-left: 66px;
        width: auto;
        float: none;
        margin-left: 15px;
        line-height: 30px;
    }
    .dds3 li{
        display: inline-block;
        white-space: nowrap;
        padding-right: 20px;
        padding-bottom: 5px;
    }
    .dds3 li a{
        display: inline-block;
        padding: 0 2px 0 0;
        margin: 0 10px 0 0;
        color: #666;
        white-space: nowrap;
        font-size: 12px;
    }
    .paybox-wrap{
        position: absolute;
        right: 0;
        top: 0;
    }
    .paybox{
        width: 67px;
        overflow: visible;
        z-index: 3;
        font-size: 14px;
        line-height: 30px;
    }
    .paybox em{
        font-style: normal;
        color: #666;
    }
    .paysuoyou{
        display: inline;
        font-family: tm-detail-font;
        width: 12px;
        height: 12px;
        cursor: pointer;
    }
    .kkwrap{
        width: 200px;
        height: 922px;
        border-left: 1px solid #f2f2f2;
    }
    .inner{
        height: 100%;
    }
    .innerhd{
        position: relative;
        height: 20px;
        margin-top: 5px;
        overflow: hidden;
    }
    .innerhd s{
        position: absolute;
        top: 10px;
        left: 30px;
        width: 140px;
        height: 0;
        border-top: 1px #c9c9c9 dotted;
        text-decoration: none;
    }
    .innerhd span{
        font-size: 12px;
        position: absolute;
        color: #999;
        text-align: center;
        width: 6em;
        top: 0;
        left: 50%;
        margin-left: -3em;
        background-color: #fff;
    }
    .innerlist-wrap{
        padding: 10px 12px 2px 13px;
        position: relative;
    }
    .innerlist{
        height: 800px;
        overflow: hidden;
        position: relative;
    }
    .innerul{
        width: 100%;
    }
    .innerli{
       height: 160px;
    }
    .innerimg-wrap{
        height: 140px;
        width: 140px;
        margin: 0 auto;
        position: relative;
        background-color: #f8f8f8;
        vertical-align: middle;
        line-height: 120px;
        overflow: hidden;
    }
    .inneras{
        display: block;
        text-align: center;
        color: #62574e;
        zoom: 1;
        cursor: pointer;
    }
    .innerimg{
        display: block;
        vertical-align: middle;
        height: 140px;
        width: 140px;
    }
    .lookprice{
        width: 100%;
        left: 0;
        position: absolute;
        font-family: Arial;
        line-height: 20px;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF) \\8;
        background-color: rgba(255,255,255,.8);
        bottom: 0;
        text-align: center;
        margin-bottom: 0;
    }
    .innersx{
        overflow: hidden;
        padding: 0 42px;
    }
    .innersx li{
        
    }
    .innersh{
        text-indent: -999em;
        background-color: transparent;
        width: 27px;
        height: 27px;
        cursor: pointer;
        background-repeat: no-repeat;
        background: url("../assets/img/ys/112.png");
        background-position: 0 0;
    }
    .innerxia{
        text-indent: -999em;
        background-color: transparent;
        width: 27px;
        height: 27px;
        cursor: pointer;
        background-repeat: no-repeat;
        background: url("../assets/img/ys/112.png");
        background-position: 0 -30px;
    }
    .innersh:hover{
        background-position: 0 -61px;
    }
    .innerxia:hover{
        background-position: 0 -93px;
    }
    .pinlun-wrap{
        width: 100%;
        position: relative;
        margin: 0 auto;
    }
    .pdianpuwrap{
        width: 190px;
    }
    .plhds{
        padding: 0 0 0 15px;
        height: 48px;
        line-height: 48px;
        background-color: #fafafa;
        border-bottom: 1px solid #e5e5e5;
    }
    .pldianname{
        color: #333;
        font-size: 12px;
    }
    .pldianname:hover{
        text-decoration: underline;
    }
    .dongtus{
        text-decoration: none!important;
        width: 20px;
        height: 20px;
        zoom: 1;
        display: inline-block;
        vertical-align: text-bottom;
        background: url("../assets/img/ys/slogo.gif");
        background-position: -80px 0;
    }
    .jiniandianwrap{
        overflow: hidden;
        zoom: 1;
        width: 130px;
        margin: 10px auto 5px;
    }
    .jinianicon{
        margin-left: 3px;
        margin-right: 8px;
        background-color: #f04343;
        color: #ffd800;
        text-align: center;
        zoom: 1;
        width: 18px;
        height: 18px;
        float: left;
            font-family: tahoma,arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
            font-size: 14px;
    }
    .jiniandian{
        font-size: 12px;
        color: #999;
        float: left;
        font-weight: 700;
    }
    .main-info{
        overflow: hidden;
        width: 130px;
        margin: 0 auto;
        cursor: pointer;
        position: relative;
    }
    .shopitem{
        float: left;
        color: #999;
        width: 36px;
        height: 36px;
        margin: 15px 7px 0 0;
        position: relative;
    }
    .shoptitle{
        text-align: center;
        font-family: "\5b8b\4f53";
        color: #999;
        font-size: 12px;
    }
    .shopscore{
        color: #ff0036;
        padding-left: 5px;
        height: 18px;
        width: 31px;
        position: relative;
        overflow: hidden;
    }
    .scoreup{
        color: #ff0036;
        background: 0 0;
        text-decoration: none;
        height: 13px;
        width: 12px;
        right: 2px;
        top: 5px;
        position: absolute;
        font-family: tahoma,arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    }
   
    .sps-con{
        font-size: 12px;
    }
    .btnscwrap{
        overflow: hidden;
        margin: 15px auto 0;
        width: 150px;
    }
    .jindiangg{
        float: left;
        width: 70px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        text-decoration: none;
        border: 1px solid #333;
        background-color: #333;
        color: #fff;
        font-size: 14px;
    }
    .scdd{
        float: right;
        text-decoration: none;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        color: #333;
        width: 70px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-size: 14px;
    }
    .plwraps1{
        width: 790px;
    }
    .pl1hd{
        width: 788px;
        border: 1px solid #dfdfdf;
    }
    .pl1ul{
        width: 100%;
        position: relative;
        height: 48px;
        background: #fff;
    }
    .pl1ul li{
        line-height: 48px;
        display: block;
        cursor: pointer;
        float: left;
    }
    .ac1{
        position: relative;
        border-top: 2px solid #FF0036;
        height: 47px;
        margin: -1px 0 0 -1px;
        z-index: 1;
        padding: 0;
    }
    .spinxiangqins{
        font-weight: 700;
        display: block;
        height: 100%;
        line-height: 46px;
        color: #FF0036;
        border-left: 1px solid #cfbfb1;
        border-right: 1px solid #cfbfb1;
        padding: 0 20px;
    }
    .ac1::after{
        content: ' ';
        display: block;
        border-width: 5px;
        border-style: solid;
        border-color: #FF0036 transparent transparent;
        width: 0;
        height: 0;
        font-family: arial;
        position: absolute;
        top: -1px;
        left: 50%;
        margin-left: -5px;
    }
    .ljias{
        float: left;
        margin-left: -1px;
        height: 48px;
        line-height: 48px;
        display: block;
        cursor: pointer;
    }
    .ljias a{
        border-right: 1px dotted #d2d2d2;
        color: #333;
        padding: 0 20px;
    }
    .pjshus1{
        color: #35a;
        margin: 0 1px;
        display: inline;
    }
    .newdpinfo{
        display: none;
        clear: both;
        border: 1px solid #e6e6e6;
        border-top: none;
        margin-bottom: 10px;
        width: 790px;
        height: 279px;
        background: #000;
    }
    .zhenplwrap>div{
        padding: 16px 7px;
        border-bottom: 1px solid #e3e3e3;
    }
    .ntu{
        width: 494px;
        padding-right: 30px;
    }
    .spleixins{
        width: 135px;
        color: #999;
        font-size: 12px;
    }
    .pjz{
        padding-right: 0;
    }
</style>
